<template>
  <div id="bottomLeft">
    <div class="">
     
      <div>
        <div id="bottomLeftChart1" style="width:100%;height:300px;"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: null
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let t = this;
      this.chart = this.$echarts.init(document.getElementById("bottomLeftChart1"));
      //  ----------------------------------------------------------------
      let category = [
        '0:00', '1:30', '4:30', '5:30', '6:30', '7:30', '9:30', '10:30', '12:30', '13:30', '15:30', '16:30', '18:30', '19:30', '21:30', '22:30'
      ];
      let lineData = [
       620, 532, 601, 934, 790, 1030, 1120,232, 601, 944, 1190, 1230, 1120,924, 920, 1130, 1220
      ];
   
     let lineData1 = [
        820, 932, 901, 934, 1290, 1330, 1320,932, 901, 934, 1290, 1330, 1320,934, 1290, 1330, 1320
      ];
      let w = document.documentElement.clientWidth / 100;
      let w1 = document.documentElement.clientWidth / 120;
      let option = {
        title: {
          text: "17日水口出力曲线",
          x: "center",
          y: 5,
          textStyle: {
            color: "#B4B4B4",
            fontSize: w,
            fontWeight: "normal"
          }
        },
        legend: {
          top: '70%',
          left: 'center',
          orient: "horizontal",
          
          data: ["互补前", "互补后"],
          textStyle: {
            color: "#fff",
            fontSize: w1
          }
        },
       grid: {
          left: 45,
          right:15,
          top: "10%"
        },
         tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          }
        },
        yAxis: [
          {
            splitLine: { show: false },

            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            }
          }
        ],
        
        series: [
          {
            name: "互补前",
            type: "line",
             symbol:"none",
             smooth: true,
            itemStyle: {
                color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  
                  offset: 0,
                  color: '#94FFDD'
                },
                {
                  
                  offset: 1,
                  color: '#1AFFE4'
                }
              ])
              },
            data: lineData
          },
          {
            name: "互补后",
            type: "line",
            symbol:"none",
            smooth: true,
            itemStyle: {
                color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  
                  offset: 0,
                  color: '#FFDA33'
                },
                {
                  
                  offset: 1,
                  color: '#FF9D00'
                }
              ])
            },
            data: lineData1
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>



<style lang="scss">
#bottomLeft {
  padding: 5px;
  margin-bottom: 5px;
  height: 300px;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
     padding: 0.2rem;
    height: 30vh ;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>